<div class="f-form-layout farris-form farris-form-controls-inline">

  <div class="form-group farris-form-group col-12 mb-2" *ngIf="styleTypes.length > 1">
    <span class="col-form-label"> 类型 </span>
    <farris-combo-list [(ngModel)]="styleType" [idField]="'value'" [textField]="'text'" [data]="styleTypes"
      [editable]="false" [multiSelect]="false" [enableClear]="false" [enableCancelSelected]="false" [nosearch]="false"
      class="flex-fill">
    </farris-combo-list>
  </div>

  <!-- 数字 -->
  <div *ngIf="styleType==='number'" class="w-100">
    <div class="form-group farris-form-group col-12 mb-2">
      <span class="col-form-label"> 精度 </span>
      <farris-number-spinner [(ngModel)]="numberPrecision" [precision]="0" [min]="0" [max]="8" class="flex-fill"
        (ngModelChange)="onNumberPrecisionChanged()"> </farris-number-spinner>
    </div>

    <div class="form-group farris-form-group col-12 mb-2">
      <span class="col-form-label"> 格式 </span>
      <farris-radiogroup [(ngModel)]="numberFormat" [horizontal]="false" [textField]="'text'" [valueField]="'value'"
        [data]="numberFormats" class="flex-fill">
      </farris-radiogroup>
    </div>


    <div class="applyBtn" *ngIf="numberFormat">
      <button class="btn f-rt-btn btn-primary" type="button" (click)="sumbitStyle()">应用</button>
    </div>

  </div>

  <!-- 日期 -->
  <div *ngIf="styleType==='date'" class="w-100">
    <div class="form-group farris-form-group col-12 mb-2 px-0">
      <span class="col-form-label datetime"> 格式 </span>
      <farris-radiogroup [(ngModel)]="dateFormat" [horizontal]="false" [textField]="'text'" [valueField]="'value'"
        [data]="dateFormats" class="flex-fill">
      </farris-radiogroup>
    </div>

    <div class="applyBtn" *ngIf="dateFormat">
      <button class="btn f-rt-btn btn-primary" type="button" (click)="sumbitStyle()">应用</button>
    </div>

  </div>



  <!-- 图标 -->
  <div *ngIf="styleType==='icon'" class="w-100">
    <div class="form-group farris-form-group col-12">
      <span class="col-form-label"> 图标集 </span>
      <farris-combo-list [(ngModel)]="selectedIconType" [idField]="'value'" [textField]="'text'" [data]="iconTypes"
        [editable]="false" [multiSelect]="false" [enableClear]="false" [enableCancelSelected]="false" [nosearch]="false"
        (ngModelChange)="onIconTypeChanged()" [itemTemplate]="iconTypeItemTemp" class="flex-fill">
      </farris-combo-list>
    </div>

    <div class="form-group farris-form-group col-12 my-2 d-block" *ngIf="selectedIconType!=='none'">

      <div *ngFor="let icon of iconClassEnums" class="d-flex w-100 mb-2">
        <div style="width:50px;flex-shrink: 0;text-align: center;">
          <span [class]="icon.class"></span>
        </div>
        <farris-combo-list [(ngModel)]="iconEnumMapping[icon.id]" [idField]="'value'" [textField]="'name'"
          [data]="enumData" [editable]="false" [multiSelect]="false" [enableClear]="true" [enableCancelSelected]="false"
          [nosearch]="false" class="flex-fill" placeHolder="请选择枚举项">
        </farris-combo-list>
      </div>
    </div>

    <div class="applyBtn" *ngIf="showEnumIconOkBtn">
      <button class="btn f-rt-btn btn-primary" type="button" (click)="sumbitStyle()">应用</button>
    </div>

  </div>


</div>




<ng-template #iconTypeItemTemp let-item let-idx="index">
  <span class="mr-2">{{item.text}}</span>
  <span *ngFor="let className of item.iconClass" [class]="className.class + ' mr-2'"></span>

</ng-template>

